<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <style>
    html,
    body,
    ol {
      margin: 0;
      padding: 0px;
    }

    .tabs {
      position: relative;
      width: 300px;
      height: 200px;
      margin: 100px auto;
      background: rgb(22, 224, 231);
    }

    .nav {
      width: 100%;
      height: 37px;
      overflow: hidden;
    }

    .nav a {
      display: block;
      text-decoration: none;
      float: left;
      width: 25%;
      height: 37px;
      text-align: center;
      line-height: 37px;
      box-sizing: border-box;
      border-right: 1px solid #1ac;
      background: rgb(238, 18, 238);
    }

    .nav a:last-child {
      border-right: none;
    }

    /* 内容区域 */
    .section {
      position: absolute;
      top: 50px;
      left: 20px;
      color: rgb(59, 75, 22);
    }

    ol {
      list-style-position: inside;
    }

    ol li {
      line-height: 37px;
    }

    .section {
      display: none;
    }

    .nav .active {
      background-color: #30ee30;
    }
  </style>
</head>

<body>
  <!-- 1.写html -->
  <!-- 1.1 大容器tabs -->
  <div class="tabs">
    <!-- 1.1.1 顶部导航 -->
    <div class="nav">
      <!-- 1.1.1.1 4个a标签 -->
      <!-- 注意: 自定义属性的作用在这里就是和下面的section联系起来 -->
      <a href="javascript:;" class="active">国内新闻</a>
      <a href="javascript:;">国际新闻</a>
      <a href="javascript:;">体育新闻</a>
      <a href="javascript:;">娱乐新闻</a>
    </div>

    <!-- 1.1.2 内容区域 -->
    <div class="content">
      <!-- 1.1.2.1 四个内容块 -->
      <div class="section" style="display:block">
        <!-- 1.1.2.1.1 有序列表 列表项 -->
        <ol>
          <li>1个人</li>

        </ol>
      </div>
      <div class="section">
        <!-- 1.1.2.1.1 有序列表 列表项 -->
        <ol>
          <li>aaaa</li>

        </ol>
      </div>
      <div class="section">
        <!-- 1.1.2.1.1 有序列表 列表项 -->
        <ol>
          <li>bbbbb</li>
        </ol>
      </div>
      <div class="section">
        <!-- 1.1.2.1.1 有序列表 列表项 -->
        <ol>
          <li>cccc</li>
        </ol>
      </div>

    </div>
  </div>

  <script>
    // 获取要点击的标签 此时即是a
    // var aLink = document.querySelectorAll('a');
    // // 获取内容部分
    // var aSection = document.querySelectorAll('.section');
    // // 遍历要点击的标签
    // for (var i = 0; i < aLink.length; i++) {
    //   // 添加自定义属性
    //   aLink[i].setAttribute('index', i);
    //   // 添加点击事件
    //   aLink[i].onclick = function () {
    //     // 排他再次遍历
    //     for (var j = 0; j < aLink.length; j++) {
    //       // 移除所有的class标签  为了让a标签不被选中
    //       aLink[j].removeAttribute('class');
    //       // 让所有内容隐藏
    //       aSection[j].style.display = 'none';
    //     }
    //     // 点击的这个className 添加active  a标签选中
    //     this.className = 'active';
    //     aSection[this.getAttribute('index')].style.display = 'block';
    //   }
    // }

    // 第二遍
    // var aLink = document.querySelectorAll('a');
    // var aSection = document.querySelectorAll('.section')
    // for (var i = 0; i < aLink.length; i++) {
    //   aLink[i].setAttribute('index', i);
    //   aLink[i].onclick = function () {
    //     for (var k = 0; k < aLink.length; k++) {
    //       aLink[k].removeAttribute('class');
    //       aSection[k].style.display = 'none';
    //     }
    //     this.className = 'active';
    //     aSection[this.getAttribute('index')].style.display = 'block';
    //   }
    // }
  </script>
</body>

</html>